/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
  TextInput
} from 'react-native';

export default class MyProject extends Component {
  render() {
    return (
        <View style={styles.container}>
          {/*<Text>注释这样写</Text>*/}
          <Text style={styles.welcome}>
            React-Native入门学习
          </Text>
          <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
          </Image>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'red',
  },
  pic: {
    width:100,
    height:100,
  },
});


var Dimensions = require('Dimensions');
class MyProject1 extends Component {
    render() {
        return (
            <View style={styles1.container}>
                <Text>当前屏幕的宽度:{Dimensions.get('window').width}</Text>
                <Text>当前屏幕的高度:{Dimensions.get('window').height}</Text>
                <Text>当前屏幕的分辨率:{Dimensions.get('window').scale }</Text>
            </View>
        );
    }
}

const styles1 = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});



//简单的布局练习

//加载json文件数据
var BageDate = require('./ImageData.json');

//定义一些全局变量
var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

var cols = 3;
var boxW = 100;

var wMargin = (width - cols * boxW) / (cols + 1);
var hMargin = 25;


class MyProject2 extends Component {
    render() {
        return (
            <View style={styles2.container}>
                {/*获取6个包*/}
                {this.renderAllImage()}
            </View>
        );
    }
    /*返回6个包*/
    renderAllImage() {
        //定义数组装所有的子组件
        var allBadge = [];
        //遍历JSON数据
        for (var i=0;i<BageDate.data.length;i++){
            //取出单独的数据对象
            var badge = BageDate.data[i];
            //直接装入数组
            allBadge.push(
                <View key={i} style={styles2.outViewStyle}>
                    <Image style={styles2.textImageStyle} source={{uri:badge.icon}}/>
                    <Text style={styles2.textTitleStyle}>
                        {badge.title}
                    </Text>
                </View>
            );
        }
        //返回数组
        return allBadge;
    }
}

const styles2 = StyleSheet.create({
    container: {
        //flex: 1, 要换行就要去掉
        backgroundColor: '#F5FCFF',
        flexDirection:'row',
        flexWrap:'wrap',
    },
    outViewStyle:{
        backgroundColor:'gray',
        alignItems:'center',
        width:boxW,
        height:boxW,
        marginLeft:wMargin,
        marginTop:hMargin,
    },
    textImageStyle:{
        width:80,
        height:80,
    },
    textTitleStyle:{

    }
});


class MyProject3 extends Component {
    render() {
        return (
            <View style={styles3.container}>
                <TextInput
                    style={styles3.textFieldStyle}
                    value='测试'

                />
            </View>
        );
    }
}

const styles3 = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    textFieldStyle:{
        width:200,
        height:40,
        marginTop:30,
        // backgroundColor:'black',
        borderWidth:1,
        borderColor:'black',
        borderRadius:5,
    }
});


//引入外部的js文件
var LoginView = require('./loginView');

class MyProject4 extends Component {
    render() {
        return (
            <LoginView />
        );
    }
}

//点击事件
//引入外部的js文件
var PressView = require('./pressView');

class MyProject5 extends Component {
    render() {
        return (
            <PressView />
        );
    }
}

//点击事件
//引入外部的js文件
var LifeStyle = require('./lifeStyle');

var ScrollView = require('./scrollView');

class MyProject6 extends Component {
    render() {
        return (
            <ScrollView />
        );
    }
}

//点击事件
//引入外部的js文件
var ListView = require('./listView');

class MyProject7 extends Component {
    render() {
        return (
            <ListView />
        );
    }
}

//点击事件
//引入外部的js文件
var ListViewNine = require('./listViewNine');

class MyProject8 extends Component {
    render() {
        return (
            <ListViewNine />
        );
    }
}

//点击事件
//引入外部的js文件
var ListTable = require('./listTable');

class MyProject9 extends Component {
    render() {
        return (
            <ListTable />
        );
    }
}

//点击事件
//引入外部的js文件
var TabBarView = require('./tabBarView');

class MyProject10 extends Component {
    render() {
        return (
            <TabBarView />
        );
    }
}

//点击事件
//引入外部的js文件
var Navigator = require('./navigator');

class MyProject11 extends Component {
    render() {
        return (
            <Navigator />
        );
    }
}

AppRegistry.registerComponent('MyProject', () => MyProject11);
